<template>
	<div>
		<!-- 走马灯界面 -->
		<div class="myswiper" v-if="isSwiper">
			<el-carousel :interval="4000" type="card" height="800px">
				<el-carousel-item v-for="(item, index) in bookList" :key="index">
					<!-- <h3 class="medium">{{ item }}</h3> -->
					<img :src="'http://gyt2bs.natappfree.cc/' + item.CoverPicURL" alt="" @click="choseBook(index)">
					<!-- <img src="@/assets/text.jpg" @click="choseBook(index)"> -->
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 书的详情 -->
		<div class="detial" v-if="!isSwiper">
			<div class="top">
				<div class="back">
					<el-button icon="el-icon-arrow-left" class="back_btn" @click="back" size="mini">返回</el-button>
					<!-- <span>{{}}</span> -->
				</div>
				<div class="other">
					<!-- 用户标记 -->
					<!-- <div class="mark">
						<el-button icon="el-icon-edit-outline" size="mini" class="btn" @click="blueMark">开始标注</el-button>
					</div> -->
					<!-- 缩放 -->
					<!-- <div class="sf">
						<el-button icon="el-icon-minus" circle size="mini"></el-button>
						<span>放大缩小</span>
						<el-button icon="el-icon-plus" circle size="mini"></el-button>
					</div> -->
					<!-- 页码模块 -->
					<div class="pageCount">
						<el-button size="mini" class="backpage" @click="goLastPage()"><i
								class="el-icon-caret-left"></i>上一页</el-button>
						<div class="myinput">
							<input class="myinput" type="text" v-model="userChose.pageNumber" @blur="pageChange">
						</div>
						<el-button size="mini" class="nextpage" @click="goNextPage()">下一页<i
								class="el-icon-caret-right"></i></el-button>
					</div>
				</div>
			</div>
			<div class="page" ref="imageTofile" v-viewer>
				<!-- 每个蓝色框 -->
				<div :style="{
					width: item.EndX - item.StartX + 'px',
					position: 'absolute',
					height: item.EndY - item.StartY + 'px',
					border: '6px solid blue',
					margin: '100px',
					zIndex: '10',
					marginLeft: item.StartX + 'px',
					marginTop: item.StartY + 'px',
					// display: 'none'
				}" v-for="(item, index) in xyData" :key="index" @click="check($event, item, index)">
				</div>
				<!-- 每一页的图片 -->
				<img :src="'http://gyt2bs.natappfree.cc/' + pageInfo.picURL" alt="" @click="checkXY">
				<!-- <img src="@/assets/test1.jpg" alt="" @click="checkXY"> -->
			</div>
		</div>
		<myDialog ref="isShow"></myDialog>
	</div>
</template>

<script>
import myDialog from '@/components/myDrawer.vue'
export default {
	name: 'labelDetail',
	data() {
		return {
			bookList: [
				// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			],
			// 用户输入
			userChose: {
				BookID: 0,
				pageNumber: 1,
			},
			// 每一页的数据
			pageData: [],
			// 每一页返回的图片跟id
			pageInfo:{},
			// 每一个图片的XY信息
			xyData: [],
			// 走马灯与每一页切换
			isSwiper: true,
			// 控制drawer弹出框
			// isShow: false
			pageCount: []
		}
	},
	components: {
		myDialog
	},
	mounted() {
		// 所有书
		this.getAllBook()
		// 具体某一页
		// this.getBookPage()
	},
	methods: {
		pageChange(){
			// console.log(this.userChose.pageNumber)
			this.getXYData()
			this.getBookPage()
		},
		checkXY(e) {
			console.log(e, e.pageX - 80, e.pageY - 285)
		},
		// 点击开始标注后调用
		// blueMark() {
		// 	console.log(e, item)
		// },
		// 用户选择书籍
		choseBook(id) {
			id += 2
			console.log(id)
			this.userChose.BookID = id
			// 获取书籍的所有页码
			this.getPageCount()
			// 用户选择了书之后 发送请求并
			this.getBookPage()
			// 获取前端mock的xy
			this.getXYData()
			// 前端mock的其他数据
			// this.getmock()
			// 切换页面
			this.isSwiper = false
			// console.log(this.isSwiper)
		},
		// 返回swiper界面
		back() {
			this.isSwiper = true
			console.log(this.isSwiper)
		},
		// 点击蓝色框触发
		check(e, item, index) {
			// console.log(888, e.pageX, e.pageY)
			// console.log(e, item.StartX,item.EndX,item.StartY,item.EndY,this.$refs.isShow.drawer)
			// 判断是否在蓝色框内
			// 弹出标注框
			this.$refs.isShow.drawer = true
				// 传递标注页面数据
			this.$refs.isShow.drawerData = this.pageData[index]
			console.log('999999',this.$refs.isShow.drawerData)
			// if ((e.pageX - 80) > item.StartX && (e.pageX - 80) <= item.EndX && (e.pageY - 285) >= item.StartY && (e.pageY - 285) <= item.EndY) {
			// 	// 弹出标注框
			// 	this.$refs.isShow.drawer = true
			// 	// 传递标注页面
			// 	this.$refs.isShow.drawerData = this.pageData[index]
			// }
		},
		// 获取每本书籍
		async getAllBook() {
			const res = await this.$http.get(`api/books`)
			this.bookList = res.data
			console.log('Books:', res.data, 'booList:', this.bookList)
		},
		// 获得书籍的所有页码
		async getPageCount() {
			// setInterval(() => {
			// this.$http.get(`http://kfjsbh.natappfree.cc/api/bookPage/${this.userChose.BookID}`)
			// 	console.log(1)
			// }, 100);
			const res = await this.$http.get(`api/bookPage/${this.userChose.BookID}`)
			this.pageCount = res.data
			this.userChose.pageNumber = parseInt(this.pageCount[0]) 
			console.log('pagecount:', res, this.pageCount, this.userChose.pageNumber)

		},
		// 获取前端mock的xy数据
		getXYData() {
			this.$http.get(`http://localhost:3000/XYdata?bookId=${this.userChose.BookID}&pageId=${this.userChose.pageNumber}`).then(res => {
				this.xyData = res.data[0].XYList
				console.log('XYdata:',res.data,res.data[0],this.xyData)
			})
		},
		// 获取前端mock的页面其他数据
		getmock(){
			// this.$http.get('http://localhost:3000/bookpage').then(res=>{
			// 	console.log(res)
			// 	this.pageData = res.data
			// })
		},
		// 获取指定页的数据
		async getBookPage() {
			const res = await this.$http.get(`api/viewMarker/${this.userChose.BookID}/${this.userChose.pageNumber}`)
			this.pageData = res.data[0]
			this.pageInfo = res.data[1]
			console.log('pageData:', res.data,this.pageData,this.pageInfo.picURL)
		},
		// 上一页
		goLastPage() {
			this.userChose.pageNumber = parseInt(this.userChose.pageNumber)
			this.userChose.pageNumber -= 1
			this.getBookPage()
			this.getXYData()
		},
		// 下一页
		goNextPage() {
			this.userChose.pageNumber = parseInt(this.userChose.pageNumber)
			this.userChose.pageNumber += 1
			this.getBookPage()
			this.getXYData()
		}
	}
}
</script>

<style lang="scss" scoped>
.myswiper {

	// width: 1140px;
	img {
		object-fit: scale-down;
		width: 100%;
		height: 100%;
	}
}

.detial {
	.top {
		display: flex;
		flex-direction: column;
		height: 80px;
		width: 100%;
		// background-color: pink;

		.back {
			height: 45px;
			display: flex;

			.back_btn {
				width: 80px;
				margin: 0 450px 0 4px;
				height: 35px;
				// text-align: center;
				line-height: 20px;
				// flex: 1;
				// background-color: #fff;

			}

			span {
				text-align: center;
				margin: 10px 0 0 55px;
				// background-color: grey;

			}
		}

		.other {
			display: flex;
			margin: 5px 0;

			.sf {
				height: 28px;
				margin: 0 10px 0 0;
				border: 1px solid #999;
				border-radius: 23px;
			}

			.mark {
				margin: 0 10px 0 3px;
			}

			.pageCount {
				height: 28px;
				margin: 0 10px;
				display: flex;

				.backpage {
					width: 80px;
					text-align: left;
				}

				.myinput {
					width: 28px;
					height: 22px;
					margin: 0 2px;
				}

				.nextpage {
					width: 80px;
					margin-left: 12px;
				}
			}
		}

	}

	.page {
		display: flex;

		img {
			// background-color: skyblue;
			object-fit: scale-down;
			width: 100%;
			height: 100%;
			border: 1px solid skyblue;
		}
	}
}
</style>